<!--先看一个例子-->

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">

    <title>vue $set</title>
    <script src="https://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>
</head>

<body>
    <div id="app">
        姓名：{{ name }}<br>
        年龄：{{age}}<br>
        性别：{{sex}}<br>
        说明：{{info.content}}
    </div>
    <script>
        var data = {
            name: "简书",
            age: '3',
            info: {
                content: 'my name is test'
            }
        }
        var key = 'content';
        var vm = new Vue({
            el: '#app',
            data: data,
            ready: function () {
                // Vue.set(data, 'sex', '男')
                this.$set('info.'+key, 'what is this?');
            }
        });
        // <!--如果直接新增sex属性，就会出现下图情况-->
        // data.sex = '男';
        // Vue.set(data, 'sex', '男');
    </script>
</body>